<template>
  <div class="wwrap">
    <div id="page">
      <div class="wrap">
        <!-- 头部 -->
        <header>
          <!-- <span class="iconfont">&#xe6bc;</span> -->
          <v-back></v-back>
          <h2>小U商城</h2>
          <p>
            <span class="iconfont">&#xf0112;</span>
            <span class="iconfont">&#xe71e;</span>
            <i></i>
          </p>
        </header>
        <!-- 搜索 -->
        <div id="search">
          <span class="iconfont">&#xe613;</span>
          <h1>
            <img src="../../assets/images/logo.jpg" alt="" />
          </h1>
          <input type="text" class="iconfont" placeholder=" 按内容搜索" v-model="keywords" @keydown.enter="search" />
          <span class="iconfont">&#xe663;</span>
        </div>
        <!-- 导航 -->
        <div id="nav">
          <nav>
            <!-- <a href="#/goods">推荐</a>
          <a href="#/goods">女装</a>
          <a href="">鞋包</a>
          <a href="">居家</a>
          <a href="">母婴</a> -->
            <a href="" v-for="item in cateList" :key="item.id">{{item.catename}}</a>
            <!-- <span v-for="item in cateList" :key="item.id">{{
              item.catename
            }}</span> -->
          </nav>
          <p><span class="iconfont">&#xe611;</span> 分类</p>
        </div>
      </div>
      <main>
        <!-- 轮播图 -->
        <div id="banner">
          <!-- <img src="../../assets/images/banner.jpg" alt=""> -->
          <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
            <van-swipe-item v-for="item in bannerList" :key="item.id">
              <img :src="$pre + item.img" alt="" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 小导航 -->
        <div id="nav_bar">
          <p>
            <img src="../../assets/images/icon_1.jpg" alt="" />
            <span>限时秒杀</span>
          </p>
          <p>
            <img src="../../assets/images/icon_2.jpg" alt="" />
            <span>畅销商品</span>
          </p>
          <p>
            <img src="../../assets/images/icon_3.jpg" alt="" />
            <span>品质大牌</span>
          </p>
          <p>
            <img src="../../assets/images/icon_4.jpg" alt="" />
            <span>小U自营</span>
          </p>
          <p>
            <img src="../../assets/images/icon_5.jpg" alt="" />
            <span>积分商城</span>
          </p>
        </div>
        <!-- 限时 -->
        <div id="limit" class="clearfix">
          <div class="left clearfix">
            <div class="left_t clearfix">
              <h2>限时秒杀</h2>
              <span class="iconfont">查看更多&#xe601;</span>
            </div>
            <p class="text">每天0点场，好货秒不停</p>
            <p class="time"><span>05</span>:<span>20</span>:<span>48</span></p>
          </div>
          <div class="right clearfix">
            <div class="right_t">
              <h3>品牌上新</h3>
              <p>9点整，抢大牌</p>
              <img src="../../assets/images/mark_1.jpg" alt="" />
            </div>
            <div class="right_b">
              <h3>日用好物</h3>
              <p>愿君多采撷</p>
              <img src="../../assets/images/mark_2.jpg" alt="" />
            </div>
          </div>
        </div>
        <!-- 商品 -->
        <div id="product">
          <div class="title">
            <h3>双11尖货预购</h3>
            <h4>畅购全球</h4>
          </div>
          <div class="comodity">
            <img src="../../assets/images/shop.jpg" alt="" />
            <img src="../../assets/images/shop.jpg" alt="" />
            <img src="../../assets/images/shop.jpg" alt="" />
            <img src="../../assets/images/shop.jpg" alt="" />
          </div>
        </div>
        <!-- 索引0表示：是否热卖
               索引1表示：是否新品
               索引2表示：推荐商品 -->
        <!-- 如果goodList中有数据 再渲染数据 -->
        <van-tabs type="line" v-if="goodsList.length > 0">
          <van-tab title="热卖商品">
            <van-card
              v-for="item in goodsList[0].content"
              :key="item.id"
              :price="item.price"
              :title="item.goodsname"
              :thumb="$pre + item.img"
              @click="good(item.id)"
            />
          </van-tab>
          <van-tab title="上新商品">
            <van-card
              v-for="item in goodsList[1].content"
              :key="item.id"
              :price="item.price"
              :title="item.goodsname"
              :thumb="$pre + item.img"
              @click="good2(item.id)"
            />
          </van-tab>
          <van-tab title="推荐商品">
            <van-card
              v-for="item in goodsList[2].content"
              :key="item.id"
              :price="item.price"
              :title="item.goodsname"
              :thumb="$pre + item.img"
              @click="good3(item.id)"
            />
          </van-tab>
        </van-tabs>
      </main>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
export default {
  data(){
    return{
      keywords:""
    }
  },
  methods: {
    ...mapActions({
      asyncCate: "home/asyncChangeCate",
      asyncBanner: "home/asyncChangeBanner",
      asyncGoods: "home/asyncChangeGoods",
    }),
    search(){
      this.$router.push("/goods?keywords="+this.keywords)
    },
    good(id){
      this.$router.push("/goodInfo?id="+id)
    },
    good2(id){
      this.$router.push("/goodInfo?id="+id)
    },
    good3(id){
      this.$router.push("/goodInfo?id="+id)
    }
  },
  computed: {
    ...mapGetters({
      cateList: "home/cate",
      bannerList: "home/banner",
      goodsList: "home/goods",
    }),
    
  },
  mounted() {
    this.asyncCate(), this.asyncBanner(),this.asyncGoods()
    
  },
};
</script>

<style scoped>
.van-tabs{
  margin-top: 0.2rem;
}
html,
body,
#page {
  height: 100%;
}
#page {
  max-width: 7.5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.wwrap {
  height: 100vh;
}
/*头部*/
.wrap {
  position: fixed;
  width: 100%;
}
header {
  height: 0.8rem;
  background: #ff6040;
  display: flex;
  color: #ffdfd8;
  padding: 0.3rem 0.12rem 0.12rem 0.33rem;
  align-items: center;
}
header h2 {
  font-size: 0.3rem;
  margin: 0 1.2rem 0 2.5rem;
}
header p {
  width: 1.72rem;
  height: 0.62rem;
  border: 1px solid #ff876c;
  border-radius: 0.31rem;
  line-height: 0.62rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}
header p span {
  width: 0.86rem;
  text-align: center;
}
header p i {
  width: 1px;
  height: 0.37rem;
  background: #ff876c;
  position: absolute;
  left: 0.86rem;
  top: 0.12rem;
}
#search {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0.24rem 0 0.26rem;
  box-sizing: border-box;
  color: #fff;
  background: linear-gradient(#ff6344, #ff674b);
  align-items: center;
}
#search h1 {
  width: 1.82rem;
}
#search h1 img {
  width: 100%;
}
#search input {
  width: 3.4rem;
  height: 0.64rem;
  border: 0.02rem solid #e6e6e6;
  box-sizing: border-box;
  border-radius: 0.1rem;
  color: black;
}
#search input::placeholder {
  font-size: 0.26rem;
  color: #999999;
  padding-left: 0.22rem;
}
#nav {
  display: flex;
  background: linear-gradient(#ff674b, #ff887c);
  color: #fff;
  padding: 0.33rem 0 0.17rem;
  font-size: 0.26rem;
}
#nav nav {
  display: flex;
  padding: 0 0.17rem 0 0.21rem;
  box-sizing: border-box;
  justify-content: space-between;
  width: 83%;
}
#nav nav a {
  color: #fff;
}
#nav p span {
  vertical-align: middle;
}
main {
  flex: 1;
  overflow: auto;
  margin-bottom: 1rem;
  margin-top: 3rem;
}
#banner img {
  width: 100%;
  height: 4rem;
}
#nav_bar {
  background: #fff;
  display: flex;
  padding: 0.52rem 0.35rem 0.42rem 0.38rem;
  box-sizing: border-box;
  justify-content: space-between;
}
#nav_bar p {
  display: flex;
  flex-direction: column;
  font-size: 0.18rem;
  color: #474747;
  align-items: center;
}
#nav_bar p img {
  width: 0.56rem;
  margin-bottom: 0.14rem;
}
#limit {
  padding: 0 0.2rem;
  margin-top: 0.2rem;
}
#limit .left {
  width: 3.5rem;
  height: 3.5rem;
  background: url("../../assets/images/shop_bg1.png") no-repeat;
  padding: 0 0.29rem 0 0.22rem;
  box-sizing: border-box;
  float: left;
}
#limit .left .left_t h2 {
  float: left;
  color: #85a642;
  font-size: 0.3rem;
  font-weight: bold;
  margin-top: 0.22rem;
}
#limit .left .left_t .iconfont {
  font-size: 0.18rem;
  margin-top: 0.28rem;
  float: right;
  color: #444443;
}
#limit .left .text {
  margin-top: 0.1rem;
  color: #b1cc7a;
  font-size: 0.16rem;
}
#limit .left .time {
  color: #b1cc7a;
  display: flex;
}
#limit .left .time span {
  width: 0.32rem;
  height: 0.36rem;
  color: #fff;
  background: #b1cc7a;
  margin: 0.1rem 0.1rem;
}
#limit .left .time span:nth-child(1) {
  margin-left: 0;
}
#limit .right {
  float: right;
  width: 3.5rem;
  height: 3.5rem;
}
#limit .right .right_t {
  height: 1.7rem;
  background: url("../../assets/images/shop_bg2.png") no-repeat;
  margin-bottom: 0.1rem;
  padding: 0.22rem 0 0 0.2rem;
  box-sizing: border-box;
}
#limit .right .right_t h3 {
  font-size: 0.3rem;
  color: #ff6040;
  font-weight: bold;
}
#limit .right .right_t p {
  color: #ff9984;
  font-size: 0.16rem;
  margin: 0.2rem 0 0.08rem;
}
#limit .right .right_t img {
  width: 1.2rem;
}
#limit .right .right_b {
  height: 1.7rem;
  background: url("../../assets/images/shop_bg3.png") no-repeat;
  padding: 0.22rem 0 0 0.2rem;
  box-sizing: border-box;
}
#limit .right .right_b h3 {
  color: #af40ff;
  font-size: 0.3rem;
  font-weight: bold;
}
#limit .right .right_b p {
  color: #ca81ff;
  font-size: 0.1666rem;
  margin: 0.2rem 0 0.08rem;
}
#limit .right .right_b img {
  width: 1.2rem;
}
#product {
  width: 95%;
  background: #fff;
  margin: 0.2rem 0.2rem 0;
}
#product .title {
  display: flex;
  padding: 0.25rem 1.18rem 0.33rem 0.95rem;
  box-sizing: border-box;
  justify-content: space-between;
}
#product .title h3 {
  color: #ff6040;
  font-size: 0.3rem;
  font-weight: bold;
}
#product .title h4 {
  color: #999999;
  font-size: 0.24rem;
}
#product .comodity {
  display: flex;
  padding: 0 0.2rem;
  justify-content: space-between;
}
#product .comodity img {
  height: 1.6rem;
}
footer {
  display: flex;
  height: 1.66rem;
  background: #fff;
  border-top: 1px solid #cccccc;
  padding: 0 0.72rem;
  box-sizing: border-box;
  justify-content: space-between;
}
footer p {
  color: #999999;
  height: 1.66rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer p .iconfont {
  font-size: 0.4rem;
}
footer p span {
  font-size: 0.18rem;
}
footer .cur {
  color: #ff6040;
}
</style>